<template>
    <div>
        <!--新增栏目-->
        <el-form v-model="formObj" @submit.prevent="showData" label-width="80px">

          <el-form-item label="栏目名称">
            <el-input v-model="formObj.columnName" placeholder="请输入栏目名称" size="medium" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="栏目描述">
            <el-input v-model="formObj.columnDesc" placeholder="请输入栏目描述" size="medium"></el-input>
          </el-form-item>

          <el-form-item label="内容数量">
            <!--<el-select v-model="val" placeholder="请选择内容数量">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
              <el-option label="5" value="5"></el-option>
            </el-select>-->
            <el-input v-model="val" placeholder="请选择内容数量" size="medium" style="width: 20%"></el-input>
          </el-form-item>


          <el-row v-for="item in formObj.arrList" :key="item.i">
              <el-col :span="8">
                  <el-form-item label="内容字段" >
                    <el-input size="medium" placeholder="请填写内容字段（英文）" v-model="item.attr">{{item.attr}}</el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="内容描述">
                    <el-input size="medium" placeholder="请填写内容字段（中文）" v-model="item.attrCn">{{item.attrCn}}</el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="内容类型">
                    <!--<el-input size="medium"></el-input>-->
                    <el-select placeholder="请选择内容字段类型" v-model="item.type">
                      <el-option label="字符型" value="VARCHAR"></el-option>
                      <el-option label="数字型" value="NUMBER"></el-option>
                      <el-option label="日期型" value="DATE"></el-option>
                      <el-option label="大文本" value="CLOB"></el-option>
                      <el-option label="文件" value="FILE"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-form-item>
              <el-button type="primary" @click="addColumn">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'addColumn',
  data() {
    return {
      val: '',
      formObj:{
        columnName:"",
        columnDesc:"",
        arrList: []
      }
    };
  },
  watch:{
    val: function(val,oldVal){
      console.log(oldVal);
      if(typeof (oldVal) == "undefined" || !oldVal){
          this.formObj.arrList=[]
          console.log( "(oldVal) ==undefined")
          /* 循环构造 循环val,添加input */
          for(var i=0;i<val;i++){
            let cope = {
                i: parseInt(i)+1,
                attr:"",
                attrCn:"",
                type:""
            }
            this.formObj.arrList.push(cope);
            console.log(JSON.stringify(this.formObj.arrList))
          }
      }else{
          /* 循环构造 循环val,添加input */
          for(var i=oldVal;i<val;i++){
            let cope = {
                i: parseInt(i)+1,
                attr:"",
                attrCn:"",
                type:""
            }
            this.formObj.arrList.push(cope);
            console.log(JSON.stringify(this.formObj.arrList))
          }
      }
    }
  },
  methods: {
    addColumn(){
      console.log(JSON.stringify(this.formObj));
    }
  }
};
</script>
